<template>
	<div class="w100 h100 flex-col p-t-26">
		<div class="flex top">
			<div class="top-1 flex-col overflow-y-auto">
				<div v-for="item in top1List" :key="item.workingFaceId" class="flex-col top-1-list">
					<div class="top-1-list-title flex s-center">
						<span />
						{{ item.workingFaceName }}
					</div>
					<div class="flex f1 h0 s-center">
						<img class="top-1-list-img" :src="getImgUrl(`MakeDecision/${item.img || '综采面设备.png'}`)" alt="" />
						<div class="f1 w0 top-1-list-val">
							<p>日进尺</p>
							<p>
								<span class="top-1-list-val-num">{{ item.dailyFootage }}</span>
								<span class="f-s-12">米</span>
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class="top-2">
				<img class="bgimg" :src="getImgUrl('MakeDecision/合成.gif')" alt="" />
				<span class="val" style="position: absolute; top: 2.8%; left: 6.5%">长600米<span class="m-l-5">宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 13%; left: 8%">掘进皮带</span>
				<span class="val" style="position: absolute; top: 2.8%; left: 37.5%">长600米<span class="m-l-5">宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 13%; left: 39%">掘进皮带</span>
				<span class="val" style="position: absolute; top: 2.8%; left: 85%">长20米<span class="m-l-5">宽1.4米</span></span>
				<span class="name" style="position: absolute; top: 13%; left: 86%">一部皮带</span>
				<span class="val flex-col" style="position: absolute; top: 14%; left: 28%"> 长600米<span>宽1.2米</span> </span>
				<span class="name" style="position: absolute; top: 26%; left: 28%">掘进皮带</span>
				<span class="val flex-col" style="position: absolute; top: 17%; left: 81%"> 长100米<span>宽1.2米</span> </span>
				<span class="name" style="position: absolute; top: 26%; left: 81%">二部皮带</span>
				<span class="val" style="position: absolute; top: 32.8%; left: 36.5%">长600米<span class="m-l-5">宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 43%; left: 37%">顺槽三部皮带</span>
				<span class="val" style="position: absolute; top: 47.8%; left: 5%"
					>长200米<span class="m-l-5">宽1.2米</span> <span class="m-l-10" style="color: #4d88fe">4000吨</span></span
				>
				<span class="name" style="position: absolute; top: 58%; left: 8.5%">顺槽皮带</span>
				<span class="val flex-col" style="position: absolute; top: 57%; left: 28%">长600米<span>宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 65%; left: 28%">302二部</span>
				<span class="val flex-col" style="position: absolute; top: 54%; left: 68%">长600米<span>宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 68%; left: 68%">掘进皮带</span>
				<span class="val" style="position: absolute; top: 73%; left: 31.5%">长500米<span class="m-l-5">宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 82.5%; left: 33%">302一部</span>
				<span class="val flex-col" style="position: absolute; top: 73%; left: 49%"
					>库存占比 <span style="color: #4d88fe">62.22 <span class="val">%</span></span>
				</span>
				<span class="val flex-col" style="position: absolute; top: 73%; left: 56%"
					>新增煤量 <span style="color: #4d88fe">220 <span class="val">吨</span></span>
				</span>
				<span class="val" style="position: absolute; top: 48%; left: 89.5%">原煤仓</span>
				<span class="val flex-col" style="position: absolute; top: 65%; left: 85%"
					>库存占比 <span style="color: #4d88fe">3.31 <span class="val">%</span></span>
				</span>
				<span class="val flex-col" style="position: absolute; top: 65%; left: 93.5%"
					>新增煤量 <span style="color: #4d88fe">12.58 <span class="val">吨</span></span>
				</span>
				<span class="val" style="position: absolute; top: 85.5%; left: 10%">长800米<span class="m-l-5">宽1.2米</span></span>
				<span class="name" style="position: absolute; top: 94.5%; left: 20%">掘进皮带</span>
				<span class="val" style="position: absolute; top: 85.5%; left: 52.5%"
					>长500米<span class="m-l-5">宽1.2米</span> <span class="m-l-10" style="color: #4d88fe">6000吨</span></span
				>
				<span class="name" style="position: absolute; top: 94.5%; left: 56%">五部皮带</span>
				<span style="position: absolute; right: 0; width: 90px; height: 30px; border: 1px solid #1c3260; border-top: 0; border-right: 0; top: 71%" />
			</div>

			<div class="top-3 flex">
				<div class="flex-col m-r-5" style="height: 86%; width: 15px; margin-top: 14%; border-left: 1px solid #1c3260">
					<div v-for="(item, i) in 5" class="f1 h0 flex">
						<div class="h100 line" :class="{ otop: i === 0 }" :style="{ 'border-top': `${i === 0 ? '1px solid #1c3260' : 0}` }"></div>
					</div>
				</div>
				<div class="f1 w0 overflow-y-auto">
					<div class="flex top-3-list" v-for="(item, i) in top3list" :key="i">
						<div class="val1 flex-center">{{ item.proportion }}%</div>

						<div class="f1 w0 m-x-10 flex-col">
							<div class="m-b-5 name flex-center">{{ item.coalName }}</div>
							<div
								class="f1 h0 p-x-10 flex-col m-center"
								style="
									font-size: 12px;
									color: rgba(255, 255, 255, 0.6);
									background: rgba(57, 123, 253, 0.1);
									box-sizing: border-box;
									border: 1px solid rgba(57, 123, 253, 0.3);
								"
							>
								库存
								<div class="m-t-5">
									<span style="color: #4d88fe">{{ item.storeCount }}</span> 吨
								</div>
							</div>
						</div>

						<div class="che f1 w0 flex-col">
							<div class="m-b-5 flex m-around s-center" style="height: 24px">
								<img style="height: 20px" :src="getImgUrl(`MakeDecision/货车-${i % 2 === 0 ? '蓝' : '绿'}.png`)" alt="" />
								<div
									:style="{
										background: `url(${getImgUrl(`MakeDecision/车数背景-${i % 2 === 0 ? '蓝' : '绿'}.png`)}) no-repeat 100%`,
										width: '40px',
										height: '20px'
									}"
									class="flex-center f-s-12"
								>
									{{ item.carCount }}车
								</div>
							</div>
							<div
								class="f1 h0 flex s-center p-l-10 f-s-12"
								:style="{
									background: `url(${getImgUrl(`MakeDecision/销量背景-${i % 2 === 0 ? '蓝' : '绿'}.png`)}) no-repeat`,
									'background-size': '100% 100%',
									color: 'rgba(255, 255, 255, 0.6)',
									'border-bottom': `3px solid ${i % 2 === 0 ? '#508AFF' : '#50FFAA'}`
								}"
							>
								销售<span class="fw f-s-16 m-x-4" style="color: #fff">{{ item.salesCount }}</span
								>吨
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 带班人员 -->
			<takePerson :list="takePersonList" class="f1 w0" :fileType="{ label: 'name', phone: 'phone' }" />
		</div>
		<div class="flex f1 h0 p-10">
			<my-box class="f1 w0 m-r-10" v-for="item in surfaceData" :key="item.workFaceId" :title="item.workFaceName">
				<div class="flex f1 h0 zcm">
					<div class="zcm-l flex-center">
						<div class="flex-col s-center">
							所在支架
							<div class="position-relative f-s-0 m-y-10">
								<div class="juzhong_transform flex s-center h100" style="margin-top: -2px">
									<span style="font-size: 12px; color: rgba(255, 255, 255, 0.5)">{{ item.bracket * 1 - 1 }}</span>
									<span style="font-size: 16px; margin: 0 12px">{{ item.bracket * 1 }}</span>
									<span style="font-size: 12px; color: rgba(255, 255, 255, 0.5)">{{ item.bracket * 1 + 1 }}</span>
								</div>
								<img :src="getImgUrl('MakeDecision/所在支架背景.png')" alt="" />
							</div>
							<div class="tc">
								<div class="f-s-12">
									<span class="f-s-16 m-r-4">{{ item.speed }}</span
									>米/分
								</div>
								<img :src="getImgUrl('MakeDecision/箭头.png')" alt="" />
							</div>
							<div class="position-relative" style="margin-top: -20px">
								<div class="flex m-between m-b-4">
									<span class="f-s-12" style="color: #4d88fe">
										<span class="f-s-14">{{ item.leftHeight }}</span
										>米
									</span>
									<span class="f-s-12" style="color: #4d88fe">
										<span class="f-s-14">{{ item.rightHeight }}</span
										>米
									</span>
								</div>
								<img class="w100" :src="getImgUrl('MakeDecision/采煤机.png')" alt="" />
								<div class="tc">
									割煤刀数<span class="f-s-12 m-l-5" style="color: #4d88fe">{{ item.cutCount }}刀</span>
								</div>
							</div>
						</div>
					</div>
					<my-echarts :options="optionsFn(item.dateTime, item.bracketKey)"></my-echarts>
				</div>
			</my-box>

			<my-box class="f1 w0" title="当日采煤量统计">
				<template #right>
					<span style="color: #ffffff">今日采煤总量<my-number class="m-x-5 fw" :value="total" type="primary" />吨</span>
				</template>
				<my-echarts :options="options3"></my-echarts>
			</my-box>
		</div>
	</div>
</template>

<script setup name="/MakeDecision/Production">
import { surfaceProgress, laneProgress, belt, sales, dailyCoal, leaderInfo } from '@a/make-decision-production'
import takePerson from '../components/takePerson.vue'

/**********************************************日进尺***********************************************/
let top1List = ref([
	{ name: '四盘区胶带巷', val: 0, img: '掘进面设备.png' },
	{ name: '瓦斯抽放硐室', val: 0, img: '掘进面设备.png' },
	{ name: '403综采面', val: 0, img: '综采面设备.png' },
	{ name: '302综采面', val: 0, img: '综采面设备.png' },
	{ name: '306回风巷', val: 0, img: '掘进面设备.png' }
])
laneProgress().then((res) => {
	top1List.value = res.data
})

/**********************************************销售情况***********************************************/
let top3list = ref([])
sales().then((res) => {
	top3list.value = res.data
})

/******************************************************综采面数据*******************************************************/
function optionsFn(dateTime, data) {
	return EpitionsFn({
		grid: {
			top: 30,
			bottom: 0
		},
		xAxis: {
			data: dateTime
		},
		yAxis: {
			name: '支架位置'
		},
		series: {
			name: '支架位置',
			data,
			type: 'line',
			lineStyle: {
				width: 1
			}
		}
	})
}

let surfaceData = ref([])
surfaceProgress().then((res) => {
	surfaceData.value = res.data
})

/**************************************当日采煤量统计 ****************************/
const options3 = computed(() => {
	let seriesData = [],
		{ beltName, datetime, coal } = quantity.value

	beltName?.forEach?.((item, i) => {
		seriesData.push({
			name: item,
			data: coal[i],
			type: 'line',
			yAxisIndex: 0,
			symbol: 'circle',
			symbolSize: 7,
			barWidth: 14,
			splitNumber: 6,
			smooth: false,
			lineStyle: {
				width: 1
			}
		})
	})

	return EpitionsFn({
		xAxis: {
			data: datetime
		},
		yAxis: {
			name: '（吨）'
		},
		legend: Elegend,
		series: seriesData
	})
})
let quantity = ref({}),
	total = ref(0)
dailyCoal().then((res) => {
	quantity.value = res.data
	if (res.data.coal) total.value = res.data.coal.flat().reduce((prev, current) => add(prev + current), 0)
})

// 带班人员
let takePersonList = ref([])
leaderInfo().then((res) => {
	takePersonList.value = res.data
})
</script>

<style scoped lang="scss">
.top {
	height: 68%;
	&-1 {
		width: 180px;
		margin: 0 10px;
		&-list {
			width: 100%;
			background: rgba(57, 123, 253, 0.1);
			box-sizing: border-box;
			border: 1px solid rgba(57, 123, 253, 0.3);
			height: 106px !important;
			&-title {
				height: 30px;
				padding-left: 10px;
				> span {
					width: 4px;
					background: #4d88fe;
					height: 14px;
					display: inline-block;
					margin-right: 10px;
				}
			}
			&-img {
				width: 50%;
				margin: 0 10px;
			}
			&-val {
				color: rgba(255, 255, 255, 0.6);
				&-num {
					font-size: 16px;
					color: #ffffff;
					margin-right: 5px;
				}
			}
		}
		&-list + &-list {
			margin-top: 10px;
		}
	}
	&-2 {
		width: 1080px;
		position: relative;
		.bgimg {
			position: absolute;
			top: 30px;
			bottom: 30px;
			left: 0;
			width: 100%;
			height: calc(100% - 60px);
			z-index: 0;
		}
		.name {
			color: #ffffff;
			z-index: 2;
		}
		.val {
			color: rgba(255, 255, 255, 0.6);
			font-size: 12px;
			z-index: 2;
		}
		.val2 {
			font-size: 12px;
			color: #4d88fe;
		}
	}
	&-3 {
		width: 310px;
		margin-right: 10px;

		.line {
			border-bottom: 1px solid #1c3260;
			width: 10px;
			position: relative;
			&:before {
				content: '';
				display: block;
				position: absolute;
				bottom: -5px;
				left: 10px;
				width: 0;
				height: 0;
				border: 5px solid;
				border-color: transparent transparent transparent #1c3260;
			}
		}
		.otop {
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: -5px;
				left: 10px;
				width: 0;
				height: 0;
				border: 5px solid;
				border-color: transparent transparent transparent #1c3260;
			}
		}
		&-list {
			height: 86px !important;
			.val1 {
				color: #4d88fe;
				width: 70px;
				box-sizing: border-box;
				border: 1px solid rgba(57, 123, 253, 0.3);
			}
			.name {
				font-size: 12px;
				height: 24px;
				background: rgba(65, 119, 227, 0.5);
			}
		}
		&-list + &-list {
			margin-top: 10px;
		}
	}
}

.zcm {
	&-l {
		width: 50%;
	}
}
</style>
